<% verification_method ||= "url" %>
<div
  class="border-t border-base-300/50 transition-all duration-300 group-hover:border-base-300"
  data-controller="stack-manager--badge"
  data-stack-manager--badge-verification-method-value="<%= verification_method %>"
  data-stack-manager--badge-verify-url-value="<%= stack_manager.provider_url %>"
>
  <div class="flex items-center justify-between">
    <%= link_to stack_manager.provider_url, target: "_blank", rel: "noopener", class: "group/badge inline-flex" do %>
      <div class="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-blue-500/10 text-blue-400 border border-blue-500/20 transition-all duration-300 hover:bg-blue-500/25 hover:border-blue-500/40 hover:text-blue-300 cursor-pointer">
        <iconify-icon icon="lucide:server" width="14" height="14"></iconify-icon>
        <span class="font-medium">Managed via Portainer</span>
        <div
          class="tooltip tooltip-bottom flex hidden"
          data-tip="Portainer is reachable"
          data-stack-manager--badge-target="verifyUrlSuccess"
        >
          <iconify-icon icon="lucide:external-link" width="12" height="12" class="opacity-80 group-hover/badge:opacity-100 transition-opacity duration-200"></iconify-icon>
        </div>
        <div
          class="tooltip tooltip-bottom flex hidden"
          data-tip="Portainer URL cannot be reached"
          data-stack-manager--badge-target="verifyUrlError"
        >
          <iconify-icon icon="lucide:alert-circle" width="12" height="12" class="text-red-400 opacity-80 group-hover/badge:opacity-100 transition-opacity duration-200"></iconify-icon>
        </div>
        <div
          class="tooltip tooltip-bottom flex hidden"
          data-tip="Your current login does not have access to this stack manager. Please logout and login with your portainer username and password."
          data-stack-manager--badge-target="verifyUrlNotAllowed"
        >
          <iconify-icon icon="lucide:ban" width="12" height="12" class="text-red-400 opacity-80 group-hover/badge:opacity-100 transition-opacity duration-200"></iconify-icon>
        </div>
        <iconify-icon
          icon="lucide:loader-2"
          width="12"
          height="12"
          class="opacity-80 animate-spin"
          data-stack-manager--badge-target="verifyUrlLoading"></iconify-icon>
      </div>
    <% end %>
  </div>
</div>